<template>
  <div>
    <!-- 角色管理系统 -->
    <h2>角色管理系统</h2>
    <!-- 1.0 添加角色 -->
    <ul>
      <li>
        <span>名称：</span>
        <input type="text" :disabled="!flag" v-model="roleData.name" />
      </li>
      <li><span>性别：</span> <input type="text" v-model="roleData.sex" /></li>
      <li><span>职业：</span> <input type="text" v-model="roleData.job" /></li>
      <li><span>描述：</span> <input type="text" v-model="roleData.desc" /></li>
      <li><button @click="addRole">保存</button></li>
    </ul>
    <!-- 2.0 数据展示 -->
    <table>
      <tr>
        <th>名称</th>
        <th>性别</th>
        <th>职业</th>
        <th>描述</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      <tbody>
        <tr v-for="(item, index) in roleList" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.sex }}</td>
          <td>{{ item.job }}</td>
          <td>{{ item.desc }}</td>
          <td>{{ item.cTime | setTime }}</td>
          <td>
            <button @click="editRole(item.id)">编辑</button>
            <button @click="roleList.splice(index, 1)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 3.0 修改数据 -->
  </div>
</template>

<script>
// 声明一个过滤器
function setTime(str) {
  const dateT = new Date(str)
  const yy = dateT.getFullYear()
  const mm = (dateT.getMonth() + 1).toString().padStart(2, 0)
  const dd = dateT
    .getDate()
    .toString()
    .padStart(2, 0)

  const HH = dateT
    .getHours()
    .toString()
    .padStart(2, 0)
  const MM = dateT
    .getMinutes()
    .toString()
    .padStart(2, 0)
  const SS = dateT
    .getSeconds()
    .toString()
    .padStart(2, 0)

  return `${yy}-${mm}-${dd} ${HH}:${MM}:${SS}`
}

export default {
  data() {
    return {
      flag: true,
      // 添加的数据
      roleData: {
        name: '',
        sex: '',
        job: '',
        desc: ''
      },
      roleList: [
        {
          id: 1,
          name: '迪丽热巴',
          sex: '男',
          job: '演员',
          cTime: new Date('2020-10-01'),
          desc: '我是一个演员'
        },
        {
          id: 2,
          name: '古力娜扎',
          sex: '女',
          job: '沙雕',
          cTime: new Date('2020-08-24'),
          desc: '路过...'
        },
        {
          id: 3,
          name: '马儿扎哈',
          sex: '男',
          job: '法师',
          cTime: new Date('2020-09-11'),
          desc: '路过...'
        },
        {
          id: 4,
          name: '吉吉国王',
          sex: '男',
          job: '打野',
          cTime: new Date('2020-09-11'),
          desc: '路过...'
        },
        {
          id: 5,
          name: '雷霆嘎巴',
          sex: '男',
          job: '打野',
          cTime: new Date('2020-02-22'),
          desc: '无情哈拉少...'
        }
      ]
    }
  },
  methods: {
    addRole() {
      if (this.flag) {
        this.roleList.push({
          id: this.roleList.length + 1,
          name: this.roleData.name,
          sex: this.roleData.sex,
          job: this.roleData.job,
          desc: this.roleData.desc,
          cTime: new Date()
        })
        this.roleData = {}
      } else {
        // 修改的代码
        const data = this.roleList.find(item => this.roleData.id === item.id)

        data.sex = this.roleData.sex
        data.job = this.roleData.job
        data.desc = this.roleData.desc

        this.roleData = {}
        this.flag = true
      }
    },
    editRole(id) {
      const data = this.roleList.find(item => id === item.id)
      // console.log(data)
      this.roleData.name = data.name
      this.roleData.sex = data.sex
      this.roleData.job = data.job
      this.roleData.desc = data.desc
      this.roleData.id = data.id
      this.flag = false
    }
  },
  // 声明过滤器属性
  filters: {
    setTime
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

h2 {
  padding-left: 20px;
}

ul {
  list-style: none;
  padding: 20px;

  li {
    margin: 10px 0;

    button {
      padding: 5px;
      margin-left: 53px;
    }
  }
}

table {
  width: 570px;
  border: 1px solid #ccc;
  border-collapse: collapse;

  th,
  td {
    line-height: 28px;
    text-align: center;
    border: 1px solid #ccc;
  }
}
</style>
